<template>
    <div class="pro_flexbox">
        <div class="pro_item" v-for="(elem,i) of data" :key="i">
            <img :src="`http://127.0.0.1:3000/img/${elem.img_url}`" alt="">
            <p>{{elem.title}}</p>
            <div>￥<span>{{elem.price.toFixed(2)}}</span></div>
        </div>
        <button @click="loadmore">加载更多</button>
    </div>
</template>

<script>
export default {
    data(){
        return {
            pnum:1,
            pSize:4,
            count:0,
            data:[]
        }
    },
    methods:{
        loadmore(){
            this.pnum +=1;
            this.load();
        },
        load(){
            this.axios("product",{params:{
                pnum:this.pnum,
                pSize:this.pSize
            }}).then(result => {
                this.count = result.data.count;
                this.data = this.data.concat(result.data.data);
                console.log(this.data);
            })
        }
    },
    created(){
        this.load();
    }
}
</script>

<style>
    *{
        margin: 0;
        padding: 0;
    }
    .pro_flexbox{
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
        background: brown;
    }
    .pro_item{
        width: 48%;
        height: 305px;
        background: blueviolet;
        box-sizing: border-box;
        padding: 3px !important;
        margin-top: 5px;
    }
    .pro_item>img{
        width: 100%;
        display: block;
    }
    .pro_item>p{
        display: block;
        width: 80%;
        height: 30px;
        white-space:nowrap;
        overflow: hidden;
        text-overflow:ellipsis;
        font-size: 20px;
    }
    .pro_item>div{
        font-size: 13px;
    }
    .pro_item>div>span{
        font-size: 18px;
        font-weight: 600;
        color: #b22222;
    }
</style>